<template>
  <div class="app-container">
    <EtopSearch
      :options="options"
      @getData="searchFn"
      @resettingFn="resettingFn"
    />
    <el-button type="primary" @click="openDlFn('', 'edit')" size="medium"
      >新增</el-button
    >
    <ETable
      ref="ETable"
      style="margin-top: 20px"
      :height="250"
      :titleObj="titleObj"
      @sortFun="sortFun"
      operateWidth="240"
      :reqObj="setOf"
      :reqFn="getIfSystem"
    >
      <template v-slot="{ scope }">
        <el-button @click="openDlFn(scope, 'edit')" type="text" size="small"
          >修改</el-button
        >
        <el-divider direction="vertical"></el-divider>
        <el-button
          @click="openDlFn(scope, 'detailEdit')"
          type="text"
          size="small"
          >详情</el-button
        >
        <el-divider direction="vertical"></el-divider>
        <el-button @click="resettingPas(scope)" type="text" size="small"
          >重置服务端密钥</el-button
        >
        <el-divider direction="vertical"></el-divider>
        <el-button type="text" size="small" @click="deactivateClick(scope)">
          <div v-if="scope.isEnable == 1">停用</div>
          <div v-else>启用</div>
        </el-button>
      </template></ETable
    >
    <edit ref="edit"></edit>
    <detailEdit ref="detailEdit"></detailEdit>
  </div>
</template>

<script>
import ETable from "@/components/ETable";
import ECard from "@/components/ECard";
import edit from "./edit.vue";
import detailEdit from "./detailEdit.vue";
import EtopSearch from "@/components/EtopSearch";
import {
  getIfSystem,
  postIfSystemDoAble,
  postIfSystemDoResetSecret,
} from "@/api/management/dockingSys";
export default {
  name: "dockingSys",
  components: {
    ETable,
    ECard,
    edit,
    detailEdit,
    EtopSearch,
  },
  data() {
    return {
      options: [
        {
          type: "input",
          name: "对接系统名字：",
          key: "systemName",
          value: "",
        },
        {
          type: "input",
          name: "客户端应用ID(我方)：",
          key: "clientAppId",
          value: "",
        },
        {
          type: "input",
          name: "服务端应用ID(对方)：",
          key: "serverAppId",
          value: "",
        },
      ],
      // 排序和搜索的数据
      setOf: {
        systemName: "",
        clientAppId: "",
        serverAppId: "",
        sortStr: "sortList[0].sortName=systemName&sortList[0].sortType=desc",
      },
      sortData: {
        len: 7,
        column: ["systemName"],
        orders: ["descending"],
      },
      // 表格头部
      titleObj: [
        {
          prop: "systemName",
          label: "对接系统名称",
          minWidth: "120",
        },
        {
          prop: "clientAppId",
          label: "客户端应用ID(我方)",
          width: "150",
        },
        {
          prop: "clientInterfaceUrl",
          label: "客户端接口地址",
          width: "220",
        },
        {
          prop: "isClient",
          label: "客户端",
          width: "80",
          formatter: (scope) => this.fmStatus(scope, "isClient"),
        },
        {
          prop: "serverAppId",
          label: "服务端应用ID(对方)",
          width: "150",
        },
        {
          prop: "isServer",
          label: "服务端",
          width: "80",
          formatter: (scope) => this.fmStatus(scope, "isServer"),
        },
        {
          prop: "isEnable",
          label: "启用状态",
          width: "110px",
          sortable: "custom",
          type: "color",
          formatter: (scope) => this.fmStatus(scope, "isEnable"),
        },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getIfSystem,
    searchFn(val) {
      // 如果在第四页搜索会把页码4传过去没数据，所以搜索变成1
      this.$refs.ETable.pageInfo.page = 1;
      // 保存传递出来的搜索数据，用于表格请求
      this.setOf.systemName = val.systemName;
      this.setOf.serverAppId = val.serverAppId;
      this.setOf.clientAppId = val.clientAppId;
      this.getData();
    },
    // 获取表格数据
    getData() {
      this.$refs.ETable.getData();
    },
    // 重置方法
    resettingFn() {
      // 重置搜索数据以及搜索框的options数据
      this.options.forEach((element) => (element.value = ""));
      this.setOf.systemName = "";
      this.setOf.serverAppId = "";
      this.setOf.clientAppId = "";
    },
    // 新增/修改事件
    openDlFn(scope, val) {
      this.$refs[val].open(scope);
    },
    // 重置密码
    async resettingPas(row) {
      let t = await this.$confirm(`此操作将重置密钥, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        let res = await postIfSystemDoResetSecret(row.id);
        if (res.code == 0 && res.data.bcode == 0) {
          this.$message.success("操作成功");
          this.$refs.ETable.getData();
        }
      }
    },
    // 表格排序方法
    sortFun(str) {
      this.setOf.sortStr = str;
      this.$refs.ETable.getData();
    },
    fmStatus(scope, name) {
      return (
        <span style={{ color: scope[name] == 1 ? "black" : "red" }}>
          {scope[name] == 1 ? "启用" : "停用"}
        </span>
      );
    },
    // 启用停用方法
    async deactivateClick(row) {
      let t = await this.$confirm(
        `此操作将永久${row.isEnable == "启用" ? "停用" : "启用"}, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      );
      if (t) {
        let res = await postIfSystemDoAble(row.id);
        if (res.code == 0 && res.data.bcode == 0) {
          this.$message.success("操作成功");
          this.$refs.ETable.getData();
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.fillUp {
  ::v-deep {
    .el-select {
      width: 100%;
    }
  }
}
</style>
